import Vue from 'vue'
import store from '@/store'

/**
 * Action 权限指令
 * 指令用法：
 *  - 在需要控制 action 级别权限的组件上使用 v-action:[method] , 如下：
 *    <i-button v-action:add >添加用户</a-button>
 *    <a-button v-action:delete>删除用户</a-button>
 *    <a v-action:edit @click="edit(record)">修改</a>
 *
 *  - 当前用户没有权限时，组件上使用了该指令则会被隐藏
 *  - 当后台权限跟 pro 提供的模式不同时，只需要针对这里的权限过滤进行修改即可
 *
 *  @see https://github.com/sendya/ant-design-pro-vue/pull/53
 */
const action = Vue.directive('action', {
  inserted: function (el, binding, vnode) {
    // 路由上声明要求的访问权限
    const rPermission = vnode.context.$route.meta.permission
    // 按钮上声明要求的访问权限
    const actionName = binding.arg || ''
    // 用户登录后拥有的权限
    const viewCodes = store.getters.role.accessibleViews

    // 判断是否有页面权限
    if (!viewCodes.includes(rPermission)) {
      return false
    }
    // 判断是否有按钮权限
    const buttonCodeMatched = viewCodes
      .filter(code => {
        return code.startsWith(rPermission) && code.includes('.')
      })
      .some(code => {
        const buttonCode = code.split('.')[1].toLowerCase()
        return buttonCode === '*' || buttonCode === actionName.toLowerCase()
      })

    // 无权限则隐藏按钮
    if(!buttonCodeMatched){
      el.parentNode && el.parentNode.removeChild(el) || (el.style.display = 'none')
    }

    /*
    const permissionId = elVal instanceof String && [elVal] || elVal
    roles.permissions.forEach(p => {
      if (!permissionId.includes(p.permissionId)) {
        return
      }
      if (p.actionList && !p.actionList.includes(actionName)) {
        el.parentNode && el.parentNode.removeChild(el) || (el.style.display = 'none')
      }
    })
    */
  }
})
export default action
